<template>
    <!-- 简化为只有图标和徽章的组件 -->
    <span class="pairing-icon" @click="handleIconClick" title="未配对的walmart链接">
        <i class="el-icon-connection"></i>
        <el-badge :value="pairingItems" :hidden="pairingItems === 0" class="position-badge"></el-badge>
    </span>
</template>

<script>
import { getUnpairedProductsStats } from "@/api/walmart/items"
export default {
    name: 'ProductPairing',
    data() {
        return {
            // 示例数据，实际应用中可能需要从API获取
            pairingItems: 0,
        };
    },
    mounted() {
        // 组件挂载时获取统计数据
        this.fetchUnpairedProductsStats();
        // 如果需要自动刷新，取消注释下一行
        // this.startStatsRefresh();
    },
    beforeDestroy() {
        // 组件销毁前清理定时器
        this.stopStatsRefresh();
    },
    methods: {
        // 新增图标点击处理函数
        handleIconClick() {
            // 跳转到指定页面
            this.$router.push({ name: 'RelatedProducts' });
        },
        // 添加查询未配对产品统计信息的函数
        async fetchUnpairedProductsStats() {
            try {
                // 调用API获取未配对产品统计
                const response = await getUnpairedProductsStats();

                if (response && response.data) {
                    this.pairingItems = response.data;
                }
            } catch (error) {
                console.error('Failed to fetch unpaired products stats:', error);
            }
        },

        // 如果需要定期刷新统计数据
        startStatsRefresh() {
            // 每5分钟刷新一次
            this.refreshInterval = setInterval(() => {
                this.fetchUnpairedProductsStats();
            }, 300000); // 300000毫秒 = 5分钟
        },

        stopStatsRefresh() {
            if (this.refreshInterval) {
                clearInterval(this.refreshInterval);
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.pairing-icon {
    cursor: pointer;
    padding: 0 8px;
    height: 100%;
    font-size: 18px;
    color: #5a5e66;
    display: inline-flex;
    align-items: center;
    position: relative;
    /* 为徽章定位提供参考 */

    /* 添加悬停效果提升用户体验 */
    &:hover {
        color: #409EFF;
        background: rgba(0, 0, 0, 0.025);
    }
}

.position-badge {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(30%, -20%);
    /* 微调到右上角 */
}

/* 确保徽章在正确显示 */
:deep(.el-badge__content),
.el-badge__content {
    margin-top: 2px;
    margin-right: 5px;
}
</style>